<template>
  <div class="card-box">
    <h3>当前库存情况</h3>
    <p>
      <!-- 原始方式获取 getters -->
      <!-- 总库存：<b>{{ $store.getters.totalCount }}</b> 件， -->
      <!-- 使用辅助函数解构到 computed 中的方式 -->
      总库存：<b>{{ totalCount }}</b> 件，
      <!-- 这是使用原始方式 -->
      <!-- 西安：<b>{{ $store.state.xian.count }}</b> 件，
      成都： <b>{{ $store.state.chengdu.count }}</b> 件 -->
      西安：<b>{{ xianCount }}</b> 件，
      成都： <b>{{ chengduCount }}</b> 件
    </p>
    <button class="dark" @click="gotoPage('/deliver')">发货管理 >></button>
  </div>
</template>

<script>
import { mapGetters, mapState } from 'vuex'

export default {
  data() {
    return {
      // 这里的数据是 data 中的，是私有数据，我们需要用 store 中的数据替换，所以把这里注释掉
      // xianCount: 100,
      // chengduCount: 80,
      expressCount: 3
    };
  },
  computed: {
    // 这里从根store中映射 totalCount
    ...mapGetters(['totalCount']),
    // 这里需要从模块去映射，需要使用对象作为入参，使用 key value 的形式
    ...mapState({
      xianCount: state => state.xian.count,
      chengduCount: state => state.chengdu.count,
    })
  },
  // 下面的组件老的计算属性，现在不需要了，所以注释掉
  // computed: {
  //   totalCount() {
  //     return this.xianCount + this.chengduCount;
  //   }
  // },
  methods: {
    // 跳转到指定页面
    gotoPage(to) {
      this.$router.push(to)
    }
  },
};
</script>
